<template>
  <div>
    {{ id }}---{{ name }}
    <HomeView />
  </div>
  <button @click="change('aaa')">click</button>
</template>

<script>
import { reactive, ref, toRefs, computed } from 'vue';
import HomeView from '@/views/HomeView.vue'
export default {
  components: { HomeView },
  data() {
    return {
      arr: []
    }
  },
  provide() {
    return {
      // 显式提供一个计算属性
      doubleCount: computed(() => this.arr)
    }
  },
  created() {
    let arr = [{
      name: '小明',
      age: 30,
    },
    {
      name: '小红',
      age: 29,
    }
    ];
    this.arr = arr;
  },
  //setup函数将响应式数据对象return供template使用
  setup(props, context) {
    const state = reactive({
      id: 1,
      name: "程序员",
      count: 6
    })

    const change = (param) => {
      state.id += 1;
      // console.log(param);
      // console.log(state.id);
    }

    // const doubleCount = computed(() => {
    //   return state.count * 2
    // })


    // console.log(doubleCount) // 输出：0
    console.log(state);
    console.log(toRefs(state));

    return {
      ...toRefs(state),//...扩展运算符
      change
    }
  }
}
</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
